<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jsRipOff - 2-player split screen tablet version</title>

	<script src="../../depends/jquery.js" type="text/javascript"></script>
	<script src="../../lina.js/lina.js" type="text/javascript"></script>
	<script src="../../arcade.js/arcade.js" type="text/javascript"></script>
	<script src="../../arcade.js/arcade-controls.js" type="text/javascript"></script>
	<script src="jsRipOff.js" type="text/javascript"></script>

	<!-- Safari/iPhone: Display web content in full-screen mode -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- Safari/iPhone: Hide status bar (requires full-screen mode) -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!-- Safari/iPhone: Set fixed viewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0,
		maximum-scale=1.0, user-scalable=0">
	<!-- Safari/iPhone: Define App icon -->
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<!-- Safari/iPhone: Define startup icon -->
	<link rel="apple-touch-startup-image" href="startup.png">
	<style>
	</style>
	<script type="text/javascript">

	var TabletRipOffGame = RipOffGame.extend({
		init: function(canvas, opts) {
			// Call parent constructor
			this._super(canvas, opts);
			canvas = this.canvas; // Maybe we converted element ID to canvas
			/*
			Platform:
				"Win32", "iPhone", "iPad"
				"Linux armv7I" (Samsung Galaxy s2)
			*/
			var startMessage = "<h4>jsRip-Off - 2-Player Tablet version</h4>";
			if(navigator){
				startMessage += "<p>Platform: " + navigator.platform + "</p>";
				if(navigator.standalone === false){
					// Scroll one pixel down, so Safari URL toolbar disappears
					setTimeout(scrollTo, 10, 0, 1);
					if(navigator.platform == "iPhone" || navigator.platform == "iPod"){
						startMessage += "<p>This page is optimized to run on iP<u>a</u>ds in fullscreen mode.<br>"
							+ "Use the 'Add to Home Screen' function at the bottom of this page and restart this game from the new link icon.";
							+ "</p>"
					}else if(navigator.platform == "iPad"){
						startMessage += "<p>This page is optimized to run in fullscreen mode.<br>"
							+ "Use the 'Add to Home Screen' function at the top of this screen and restart this game from the new link icon.";
							+ "</p>"
					}
				}else if(navigator.standalone !== true){
//					startMessage += "<p>This web page is optimized to run on iPads ot other tablets.</p>";
				}
			}
			startMessage += "<p style='text-align: center; font-size: 150%;'><button id='start'>Play Now !</button></p>";
			startMessage += "<p>Other versions:<br>&nbsp;&nbsp;<a href='jsRipOff-2.html'>Classic (Single player)</a> - <a href='jsRipOff-2.html'>Classic (2-player)</a></p>";
			startMessage += "<p>&nbsp;</p>";
			startMessage += "<p style='text-align: center; font-size: 80%;'>Copyright &copy; 2011 Martin Wendt. Made with <a href='http://arcade-js.googlecode.com/' target='_blank'>ArcadeJS</a>.</p>";
			// Render one frame, then stop and dispay welcome box
			this.stopRequest = true;
			var game = this; // Required for callback closures
			var popUp = new HtmlOverlay({
				game: this,
				html: startMessage,
				css: {
					opacity: 0.8
//                    backgroundColor: "black",
//                    color: "white"
				},
				onClick: function(e){
					// Evaluate id of clicked child element (the start button)
					switch( $(e.target).attr("id") ) {
					case "start":
						this.close();
						game.startLoop();
						break;
					}
				}
			});
			// Create fire buttons as HTML overlay in the lower left corners
			this.btnFire1 = new HtmlOverlay({
				game: this,
				html: "",
				pos: {x: 1, y: -1},
				css: {
					padding: 35,
					backgroundColor: "white",
					opacity: 0.3
				}
			});
			this.btnFire2 = new HtmlOverlay({
				game: this,
				html: "",
				pos: {x: -1, y: 1},
				css: {
					padding: 35,
					backgroundColor: "white",
					opacity: 0.3
				}
			});
		},
		onResize: function(width, height){
			// Adjust usable canvas area to lower half and enable clipping
			this.setCanvasArea(0, 0.5*height, width, 0.5*height, true);
			// true: Let ArcadeGame adjust canvas size to new dimensions
			return true;
		},
		postStep: function(){
			if(this.btnFire1.isDown()){
				this.player1.fire();
			}
			if(this.btnFire2 && this.btnFire2.isDown()){
				this.player2.fire();
			}
			// Find touches for top and bottom split screen (we only consider
			// the first touch on each).
			// Convert top-touch coordinates to standard CC (because top screen
			// was flipped) and calc WC for both.
			var touches = this.touches;
			if(touches){
				var bottomTouch, topTouch, t, ptCC;
				for(var i=0; i<touches.length; i++){
					t = touches[i];
					// Ignore touches for the HtmlOverlay
					if(t.target.nodeName != "CANVAS"){
						continue;
					}
					ptCC = new Point2(
						t.pageX - this.canvas.offsetLeft,
						t.pageY - this.canvas.offsetTop);
					if(ptCC.y > 0.5 * this.canvas.height){
						if(!bottomTouch){
							bottomTouch = {touch: t,
										   posCC: new Point2(ptCC.x, ptCC.y)};
							bottomTouch.pos = Point2.transform(bottomTouch.posCC, this.cc2wc);
						}
					}else if(!topTouch){
						topTouch = {touch: t,
									posCC: new Point2(this.canvasArea.width - ptCC.x, this.canvas.height - ptCC.y)};
						topTouch.pos = Point2.transform(topTouch.posCC, this.cc2wc);
					}
				}
			}
			// Accelerate players towards touch positions
			var maxSpeed = 300,
				accel = 150,
				decel = 100,
				turnRate = 180 * LinaJS.D2R,
				moveEps = 100, // start moving (instead of turning only) when touch is more than n px away
				targetEps = 10, // stop moving when target is nearer then this
				dist;
			if( bottomTouch && !this.player1.isActivity("recover") ){
				dist = bottomTouch.pos.distanceTo(this.player1.pos);
				if(dist < moveEps){
					this.player1.turnToDirection(this.frameDuration,
						bottomTouch.pos, turnRate);
				}else{
					this.player1.driveToPosition(this.frameDuration,
						bottomTouch.pos, targetEps, maxSpeed, turnRate, accel, decel);
				}
			}
			if( topTouch && !this.player2.isActivity("recover") ){
				dist = topTouch.pos.distanceTo(this.player2.pos);
				if(dist < moveEps){
					this.player2.turnToDirection(this.frameDuration,
						topTouch.pos, turnRate);
				}else{
					this.player2.driveToPosition(this.frameDuration,
						topTouch.pos, targetEps, maxSpeed, turnRate, accel, decel);
				}
			}
			//
			this._super();
		},
		postDrawCC: function(ctx){
			// Draw a flipped copy of the lower canvas part into to the upper
			// canvas half.
			var cca = this.canvasArea;
			ctx.save();
			ctx.rotate(Math.PI);
			ctx.drawImage(ctx.canvas, -cca.width, -2*cca.height);
			ctx.restore();
			// Draw divider bar
			ctx.save();
			ctx.fillStyle = "#444";
			ctx.fillRect(0, cca.height - 3, cca.width, 6);
			ctx.restore();
			// _super is 'undefined' in parent for performance reasons
			return; // this._super(ctx);
		},
		// --- end of class
		lastentry: undefined
	});

	$(function(){
		var game = new TabletRipOffGame("#gameCanvas", {
			fullscreenMode: true,
			twoPlayer: true,
			debug: {
				showFps: true,
				logToCanvas: false
			}
			});
	});
	</script>

<style>
* {
	margin: 0;
	padding: 0;
}
/*
body, html {
	width: 100%;
	height: 100%;
}
*/
</style>
</head>

<body>
	<canvas id="gameCanvas" class="arcade-js">This game requires HTML 5 support.</canvas>
</body>
</html>
